<template>
	<div class="bianjishangpin">
    <left></left>
    <div class="right">
      <div style="height: 91px; border-bottom: 1px solid rgb(227, 232, 241); width: 100%; padding: 0 30px;" class="flexbc">
        <div class="flexcc fanhui" @click="back">
          <div><i class="el-icon-arrow-left" style="margin-right: 5px;"></i></div>
          <div>返回</div>
        </div>
        <top></top>
      </div>
      <div style="padding: 37px 30px 0 30px; height: calc(100vh - 91px); overflow: auto;">

        <div class="flexc" style="font-size: 16px; font-weight: bold; margin-bottom: 20px;">
          <div><img src="../../../static/img/bianji1.png" style="width: 22px; margin-right: 10px;"></div>
          <div>商品详情</div>
        </div>

        <div class="baibeijing" style="width: 780px;" v-loading="loading"  element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
          <el-form ref="form" :model="form">
            <el-form-item>
              <div>商品名称</div>
              <div><el-input v-model="form.title" style="width: 360px;"></el-input></div>
            </el-form-item>
            <el-form-item>
              <div>注意点</div>
              <div><el-input v-model="form.points" style="width: 360px;"></el-input></div>
            </el-form-item>
            <el-form-item>
              <div>卖点</div>
              <div class="flex">
                <div><el-input v-model="form.selling_point[0]" style="width: 160px; margin-right: 10px;"></el-input></div>
                <div><el-input v-model="form.selling_point[1]" style="width: 160px; margin-right: 10px;"></el-input></div>
                <div><el-input v-model="form.selling_point[2]" style="width: 160px; margin-right: 10px;"></el-input></div>
                <div><el-input v-model="form.selling_point[3]" style="width: 160px; margin-right: 10px;"></el-input></div>
              </div>
            </el-form-item>
            <el-form-item>
              <div>月租</div>
              <div><el-input v-model="form.yuezu" style="width: 360px;" ></el-input></div>
            </el-form-item>
            <el-form-item>
              <div>通话时长</div>
              <div><el-input v-model="form.yuyin" style="width: 360px;"></el-input></div>
            </el-form-item>
            <el-form-item>
              <div>通用流量</div>
              <div><el-input v-model="form.liuliang" style="width: 360px;"></el-input></div>
            </el-form-item>
            <el-form-item>
              <div>定向流量</div>
              <div><el-input v-model="form.dx_liuliang" style="width: 360px;">缺</el-input></div>
            </el-form-item>
            <div class="flex">
              <el-form-item style="margin-right: 20px;">
                <div>商品主图</div>
                <div><chuantu :widths="'200px'" :heights="'200px'" :widths2="'200px'" :heights2="'200px'" :imgs="form.image1" @getimg="getimg" v-if="relo"></chuantu></div>
              </el-form-item>
              <el-form-item>
                <div>商品分享图</div>
                <div><chuantu :widths="'200px'" :heights="'200px'" :widths2="'200px'" :heights2="'200px'" :imgs="form.share_img" @getimg="getimg2" v-if="relo"></chuantu></div>
              </el-form-item>
            </div>
            <el-form-item>
              <div>商品详情</div>
              <div><fuwenben :content="form.description" @getcontent="getcontent" v-if="relo"></fuwenben></div>
            </el-form-item>
            <el-button type="primary" round style="margin-top: 44px;" @click="xiugai">保存</el-button>
          </el-form>
        </div>
		<!-- <footers></footers> -->
      </div>

    </div>
	</div>
</template>

<script>
  import left from '../left.vue'
  import top from '../top.vue'
  import footers from '../footer.vue'
  import chuantu from '@/components/chuantu.vue'
  import fuwenben from '@/components/fuwenben.vue'
	export default {
		name: 'bianjishangpin',
    components:{
      left,chuantu,fuwenben,top,footers
    },
		data() {
			return {
        form:{
          selling_point:[]
        },
        zidong:false,
        loading:true,
        relo:true
			}
		},
		created() {
      this.getdetail()
		},
		mounted() {

		},
		methods: {
      getimg:function(item){
        this.form.image1 = item
      },
      getimg2:function(item){
        this.form.share_img = item
      },
      getcontent:function(item){
        this.form.description = item
        const fonts = document.getElementsByTagName('font');
        for (let font of fonts) {
            const face = font.getAttribute('face');
            if (face) {
                font.style.setProperty('font-family', `"${face}"`, 'important');
                console.log(`修复字体: ${face}`);
            }
        }
      },
      xiugai:function(){
        let all = JSON.parse(JSON.stringify(this.form))
        all.selling_point = JSON.stringify(this.form.selling_point)
        axios.post('/agent/page/update',all).then((response)=>{
        	if (response.data.msg.code == 0) {
            this.$message.success('修改成功');
            this.back()
        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })
      },
      getdetail:function(){
        axios.get('/agent/page/info',{params:{id:this.$route.query.id}}).then((response)=>{
        	if (response.data.msg.code == 0) {
            response.data.data.selling_point = JSON.parse(response.data.data.selling_point)
            this.form = response.data.data

            this.relo = false
            this.$nextTick(()=>{
              this.relo = true
            })

            this.loading = false
        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })
      },
		}
	}
</script>


<style scoped lang="less">
  .bianjishangpin{
    .sxjact{background: rgb(0, 90, 255); border-radius:30px; font-size: 24px; text-align: center; font-weight: 500; color: rgb(255, 255, 255); width: 150px; height: 60px; margin-right: 30px; }
    .sxj{background: rgb(227, 232, 241); border-radius:30px; font-size: 24px; text-align: center; font-weight: 500; color: rgb(175, 179, 188); width: 150px; height: 60px; margin-right: 30px; }
    .xt{width: 72px;height: 26px; margin-right: 10px; border-radius: 5px; font-size: 12px;}
    .lj{width: 100px; height: 32px; color: rgb(64, 66, 71); background: rgb(227, 232, 241); border-radius: 16px; margin-right: 20px; font-size: 14px; cursor: pointer;}
    .ljact{width: 100px; height: 32px; color: rgb(0, 90, 255); background: rgb(228, 237, 255); border-radius: 16px; margin-right: 20px; font-size: 14px; cursor: pointer;}
    /deep/ .el-form-item{ margin-bottom: 0;}
  }

</style>
